<template>
    <div class="app-container">
        <el-card>
            <el-form inline :model="searchForm">
                <el-form-item label="名称">
                    <el-input v-model="searchForm.name" placeholder="请输入名称"></el-input>
                </el-form-item>
                <el-form-item label="状态">
                    <el-select v-model="searchForm.enableStatus" placeholder="请选择">
                        <el-option label="正常" value="1"></el-option>
                        <el-option label="停用" value="0"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button icon="el-icon-refresh" @click="resetForm()">重置</el-button>
                    <el-button icon="el-icon-search" type="primary" @click="search()">查询</el-button>
                </el-form-item>
            </el-form>
            <el-button icon="el-icon-plus" type="primary" @click="addTag()">添加</el-button>
            <el-table v-loading="listLoading" :data="tableData.list" border stripe style="margin-top: 20px;">
                <el-table-column align="center" prop="id" label="ID" width="80"></el-table-column>
                <el-table-column align="center" prop="name" label="名称"></el-table-column>
                <el-table-column align="center" prop="enableStatus" label="状态">

                    <template slot-scope="scope">
                        <el-switch v-model="scope.row.enableStatus" :active-value="1" :inactive-value="0"
                            @change="changeStatus(scope.row)"></el-switch>
                        <!-- <el-tag v-if="scope.row.enableStatus == 1">正常</el-tag>
                        <el-tag v-else type="danger">停用</el-tag> -->
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="createTime" label="创建时间"></el-table-column>
                <el-table-column align="center" label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" size="mini" @click="addTag(scope.row)">编辑</el-button>
                        <el-button type="text" size="mini" @click="handleDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination class="pageRight" background @size-change="handleSizeChange"
                @current-change="handleCurrentChange" :page-sizes="[10, 20, 30, 40]" :current-page="searchForm.pageNum"
                :page-size="searchForm.pageSize" layout="total, sizes, prev, pager, next, jumper"
                :total="tableData.total">
            </el-pagination>
        </el-card>
    </div>
</template>

<script>
import { getTagList, deleteTag, addTag, editTag } from '@/api/article.js'
export default {
    components: {
        // add
    },
    data() {
        return {
            searchForm: {
                name: '',
                enableStatus: '',
                pageNum: 1,
                pageSize: 10
            },
            tableData: {
                list: [],
                total: 0
            },
            listLoading: false,
        }
    },
    created() {
        this.getList();
    },
    methods: {
        changeStatus(val) {
            console.log(val);
            editTag(val).then(res => {
                if (res.code == 200) {
                    this.$message.success('修改成功');
                    this.getList();
                }
            });
        },
        handleSizeChange(val) {
            this.searchForm.pageSize = val;
            this.getList();
        },
        handleCurrentChange(val) {
            this.searchForm.pageNum = val;
            this.getList();

        },
        handleDelete(val) {
            this.$confirm("是否确认删除", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                deleteTag(val.id).then(res => {
                    if (res.code == 200) {
                        this.$message({
                            type: "success",
                            message: "删除成功!"
                        })
                        setTimeout(() => {
                            this.getList();
                        }, 500);
                    }
                })
            })
        },
        addTag(val = { name: '', enableStatus: 1 }) {
            this.$prompt('请输入标签', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                inputPattern: /^.{2,6}$/,
                inputErrorMessage: '请输入2-6个字符',
                inputValue: val.name,
            }).then(({ value }) => {
                if (val.id) {
                    editTag({
                        id: val.id,
                        name: value,
                        enableStatus: val.enableStatus
                    }).then(res => {
                        if (res.code == 200) {
                            this.$message.success('修改成功');
                            this.getList();
                        }
                    });
                } else {
                    let params = {
                        name: value,
                        enableStatus: 1
                    }
                    addTag(params).then(res => {
                        if (res.code == 200) {
                            this.$message.success('添加成功');
                            this.getList();
                        }
                    });
                }


            }).catch(() => {

            });
        },
        search() {
            this.searchForm.pageNum = 1;
            this.getList();
        },
        resetForm(formName) {
            this.searchForm = {
                name: '',
                enableStatus: '',
                pageNum: 1,
                pageSize: 10
            }
            this.getList();
        },
        getList() {
            this.listLoading = true;
            getTagList(this.searchForm).then(res => {
                this.tableData.list = res.data.list;
                this.tableData.total = res.data.total;
            }).finally(() => {
                this.listLoading = false;
            });
        }
    },
}
</script>

<style lang="scss" scoped></style>